今天要介紹的是如何在MVC的View當中取得選取到多個checkbox裡的值，以及全選checkbox以及取消全選的功能

HTML

1. 首先先到前端的View當中建立5個checkbox，當中的value填入值，下方再建立一個按鈕來觸發function並顯示結果
   

<style>
    .checkbox-block {
        margin: 60px 0 0 50px;
    }
    .button-block {
        margin: 60px 0 0 50px;
    }
</style>
<div class="checkbox-block">
    <table class="table table-bordered table-striped">
        <tr>
            <td>
                <input type="checkbox" name="checkboxs" value="1"/>1           
                <input type="checkbox" name="checkboxs" value="2"/>2           
                <input type="checkbox" name="checkboxs" value="3"/>3           
                <input type="checkbox" name="checkboxs" value="4"/>4           
                <input type="checkbox" name="checkboxs" value="5"/>5         
            </td>
        </tr>
    </table>
</div>
<div class="button-block">
    <button class="btn btn-primary" id="button" onclick="show()">Click</button>
</div>

JavaScript

1. 接下來是JavaScript的部分，首先先利用name取得checkbox，再利用迴圈將checkbox中的value存進陣列當中，最後在alert顯示出來
   

@section scripts
{
    <script type="text/javascript">
        function show() {
            obj = document.getElementsByName("checkboxs");
            check_value = [];
            for (i in obj) {
                if (obj[i].checked)
                    check_value.push(obj[i].value);
            }
            alert(check_value);
        }
    </script>
}

2. 最後我們到頁面中選擇要選取的多個checkbox，點選按鈕後將會出現相對應的多個value
   

全選功能

HTML

1. 若是想要checkbox有全選與取消全選的功能的話，先到View的html部分多新增一個代表為全選的checkbox
   

<input type="checkbox" id="CheckAll" name="CheckAll" /><span>All</span>

JavaScript

1. 接著在JavaScript的部分新增一個具有$(document).ready的function，使剛剛建立的checkbox能夠完成全選與取消全選的動態操作
   

<script type="text/javascript">
    $(document).ready(function () {
        $("#CheckAll").click(function () {
            if ($("#CheckAll").prop("checked")) {
                $("input[name='checkboxs']").prop("checked", true);
            } else {
                $("input[name='checkboxs']").prop("checked", false);
            }
        })
    })
</script>

2. 最後在到頁面中操作就能完成checkbox全選與取消全選的動態頁面功能